﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .foldpanel {
            width: 250px;
            border: 0px solid #ccc;
            border-bottom: none;
            font-size: 12px;
        }
            .foldpanel dt {
                background: rgb(255, 250, 232);
                cursor: pointer;
                padding: 8px 4px;
                font-size: 13px;
                font-weight: bold;
                padding-left: 20px;
                border-bottom: 1px solid #ecdfcc;
                
            }
          
            .foldpanel a {
                display: block;
                line-height: 30px;
                padding-left: 30px;
                background-color: #FBF0D2;
                transition: all .7s ease 0s;
                color:#000000;
                text-decoration:none;
            }
            .foldpanel dd {
               height:0;
               overflow:hidden;
                transition: all .7s ease 0s;
            }
                .foldpanel dd:nth-child(2) {
                    display: block;
                    height: 90px;
                }
                .foldpanel a:hover {
                    background-color: #DCAF2F;
                    color: #ffffff;
                }
    </style>
</head>
<body>
    <dl class="foldpanel">
        <dt>语言</dt>
        <dd>
            <a href="#">content</a>
            <a href="#">content</a>
            <a href="#">content</a>
        </dd>
        <dt>运动</dt>
        <dd>
            <a href="#">content</a>
            <a href="#">content</a>
            <a href="#">content</a>
        </dd>
        <dt>乐器</dt>
        <dd>
            <a href="#">content</a>
            <a href="#">content</a>
            <a href="#">content</a>
        </dd>
        <dt>男装</dt>
        <dd>
            <a href="#">content</a>
            <a href="#">content</a>
            
        </dd>
        <dt>配饰</dt>
        <dd>
            <a href="#">content</a>
            <a href="#">content</a>
            <a href="#">content</a>
        </dd>
    </dl>
    <script>
        let dts = document.querySelectorAll(`.foldpanel>dt`);
        let dds = document.querySelectorAll(`.foldpanel>dd`);
        
        for (let i = 0; i < dts.length; i++) {
            
            dts[i].onclick = function () {
                for (var j = 0; j < dds.length; j++) {
                   dds[j].style.height = `0px`;
                }
                console.log(dds[i]);
                let as = dds[i].children;
                dds[i].style.height = `${as.length*30}px`;
            }
        }
    </script>
</body>
</html>